<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../css/bootstrap.main.css"/>
    <link rel="stylesheet" href="../css/list1.css"/>
    <script src="../js/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div class="container-fluid ">
        <div class="container box3">
            <span style="color: #ffffff;font-size: 20px">第一关</span>
            <div class="box1">
                <span>倒计时：</span>
                <span id="time">60</span>
                <br/>
                <span>得分：</span>
                <span id="fen">0</span>
            </div>
            <div class="box">
                <div id="box-img" class="game"><img src="../imges/mouse.png" alt=""/></div>
                <div id="box-img1" class="game"><img src="../imges/mouse.png" alt=""/></div>
                <div id="box-img2" class="game"><img src="../imges/mouse.png" alt=""/></div>
                <div id="box-img3" class="game"><img src="../imges/mouse.png" alt=""/></div>
                <div id="box-img4" class="game"><img src="../imges/mouse.png" alt=""/></div>
                <div id="box-img5" class="game"><img src="../imges/mouse.png" alt=""/></div>
                <div id="box-img6" class="game"><img src="../imges/mouse.png" alt=""/></div>
                <div id="box-img7" class="game"><img src="../imges/mouse.png" alt=""/></div>
                <div id="box-img8" class="game"><img src="../imges/mouse.png" alt=""/></div>
                <div class="box2">
                    <a style="color: red" href="list1.html"><p>game over！重新开始</p></a>
                </div>
            </div>
            <button class="an">开始游戏</button>
            <a href="list2.html"><button class="next1">下一关</button></a>
    </div>
    </div>

    <script>
        $(function(){
        var stap = 60,
            numfen = 0;
        $(".an").on('click',function(){
            $(this).hide();
         var ste = setInterval(function(){
                stap--;
                if(stap<0){
                    $('.box2').show();
                    clearInterval(set);
                    $('.an').show();
                }
                $('#time').text(stap);
             var num=Math.floor(Math.random()*9);
             var game=document.getElementsByClassName("game")[num];
             $('.game').eq(num).css({display:'block'});
             $('.game').eq(num).siblings().css({display:'none'});
            },1000);
            });
            $('.game').on('click',function(){
                $(this).css({display:'none'});
                numfen++;
                $('#fen').text(numfen);
            });
        });
    </script>
</body>
</html>